<template>
    <div class="addForm" v-loading="loading">
        <div class="screen">
            <div :class="screenIndex == index ? 'screen_div_hover' : 'screen_div'" v-for="(item, index) in screenList"
                :key="index" @click="navClick(item.id, index)">
                {{ item.name }}
            </div>
        </div>
        <div class="addForm_for">
            <el-form ref="formDataRef" :model="formData" :rules="rules" label-width="120px"
                style="padding-bottom: 85px;" scroll-to-error>
                <el-row id="essential_information">
                    <el-col :span="24" class="fontWeight600 mb25">
                        基本信息
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="disabledName != '' ? 6 : 8">
                        <el-form-item label="供应商名称" prop="supplierId">
                            <el-select v-model="formData.supplierId" placeholder="请选择供应商名称" clearable filterable
                                v-selectLoad="selectLoad" :teleported="false" :fit-input-width="true"
                                :disabled="disabledName == 'alwaysEdit' || disabledName == 'rejectStatus' || disabledName == ''"
                                class="supplierSelect" remote :remote-method="searchQuery"
                                :loading="supplierQueryLoading" @clear="handleClear" @change="onchange">
                                <el-option v-for="dict in SupplierList" :key="dict.value" :label="dict.label"
                                    :value="dict.value">
                                </el-option>
                                <template v-if="supplierLoading">
                                    <div class="supplierSelect_icon">
                                        <el-icon class="el-select-loading__icon">
                                            <Loading />
                                        </el-icon>
                                        <span class="el-select-loading__tips">{{ "正在加载" }}</span>
                                    </div>
                                </template>
                                <template #loading>
                                    <svg class="circular" viewBox="0 0 50 50">
                                        <circle class="path" cx="25" cy="25" r="20" fill="none" />
                                    </svg>
                                </template>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2" v-if="disabledName != ''">
                        <div class="supplement" :style="{ color: disabledName == '' ? '#a8abb2' : '#409EFF' }"
                            @click="addSupplement">去补充
                        </div>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="商品名称" prop="styleName">
                            <el-input v-model="formData.styleName" clearable maxlength="50"
                                :disabled="disabledName == 'rejectStatus' || disabledName == 'alwaysEdit' || disabledName == ''"
                                placeholder="请输入商品名称" @input="(e: string) => { forbidRule(e, 'styleName', 'blank') }" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="商品类目" prop="categoryId">
                            <el-cascader v-model="formData.categoryId" clearable :options="categoryList"
                                :disabled="disabledName == 'alwaysEdit' || disabledName == 'rejectStatus' || disabledName == ''"
                                filterable :props="{ label: 'categoryName', value: 'categoryId', children: 'children' }"
                                placeholder="请选择商品类目" style="width: 100%;" ref="cascaderAddr"
                                @change="categoryIdChange" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="品牌" prop="brandName">
                            <el-input v-model="formData.brandName"
                                :disabled="disabledName == 'rejectStatus' || disabledName == 'alwaysEdit' || disabledName == ''"
                                clearable placeholder="请输入品牌" maxlength="50" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="69码" prop="styleCode">
                            <el-input v-model="formData.styleCode" clearable
                                :disabled="disabledName == 'rejectStatus' || disabledName == 'alwaysEdit' || disabledName == ''"
                                placeholder="请输入69码" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="贸易方式" prop="tradeMode">
                            <el-select v-model="formData.tradeMode" clearable
                                :disabled="disabledName == 'rejectStatus' || disabledName == 'alwaysEdit' || disabledName == ''"
                                filterable placeholder="请选择贸易方式">
                                <el-option v-for="item in hm_trade_type" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="能否破价" prop="discountPrice">
                            <el-select v-model="formData.discountPrice" clearable
                                :disabled="disabledName == 'rejectStatus' || disabledName == 'alwaysEdit' || disabledName == ''"
                                filterable placeholder="请选择能否破价">
                                <el-option v-for="item in hm_discount" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="disabledName == ''">
                        <el-form-item label="是否跳过物流" prop="skipStatus">
                            <el-input v-model="formData.skipStatus" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="对接群名" prop="groupName">
                            <el-input v-model="formData.groupName" clearable :disabled="disabledName == ''"
                                placeholder="请输入对接群名" maxlength="20"
                                @input="(e: string) => { forbidRule(e, 'groupName', 'emoji') }" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8" v-if="disabledName == ''">
                        <el-form-item label="创建时间" prop="createTime">
                            <el-input v-model="formData.createTime" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="disabledName == ''">
                        <el-form-item label="选品部门" prop="coreName">
                            <el-input v-model="formData.coreName" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="disabledName == ''">
                        <el-form-item label="直播类型" prop="liveType">
                            <el-input v-model="formData.liveType" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8" v-if="disabledName == ''">
                        <el-form-item label="产品部库存编码" prop="stockCode">
                            <el-input v-model="formData.stockCode" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="16" v-if="disabledName == ''">
                        <el-form-item label="合同状态" prop="stockCode">
                            <div class="examine_item"
                                :style="{ backgroundColor: formData.supplierVo?.sellStatus == '1' ? '#E7FDEE' : '#FDE7E7', color: formData.supplierVo?.sellStatus == '1' ? '#19D11B' : '#FC2540' }">
                                供销合同<img
                                    :src="formData.supplierVo?.sellStatus == '1' ? icon_lvseduihao : icon_wenhaohongse" />
                            </div>
                            <div class="examine_item"
                                :style="{ backgroundColor: formData.supplierVo?.discountStatus == '1' ? '#E7FDEE' : '#FDE7E7', color: formData.supplierVo?.discountStatus == '1' ? '#19D11B' : '#FC2540' }">
                                破价合同<img
                                    :src="formData.supplierVo?.discountStatus == '1' ? icon_lvseduihao : icon_wenhaohongse" />
                            </div>
                            <div class="examine_item"
                                :style="{ backgroundColor: formData.supplierVo?.depositStatus == '1' ? '#E7FDEE' : '#FDE7E7', color: formData.supplierVo?.depositStatus == '1' ? '#19D11B' : '#FC2540' }">
                                保证金协议<img
                                    :src="formData.supplierVo?.depositStatus == '1' ? icon_lvseduihao : icon_wenhaohongse" />
                            </div>
                            <div class="examine_item"
                                :style="{ backgroundColor: formData.supplierVo?.supplementStatus == '1' ? '#E7FDEE' : '#FDE7E7', color: formData.supplierVo?.supplementStatus == '1' ? '#19D11B' : '#FC2540' }">
                                补充协议<img
                                    :src="formData.supplierVo?.supplementStatus == '1' ? icon_lvseduihao : icon_wenhaohongse" />
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="历史最低售价" prop="historyPrice">
                            <el-input v-model="formData.historyPrice" clearable
                                :disabled="disabledName == 'rejectStatus' || disabledName == 'alwaysEdit' || disabledName == ''"
                                placeholder="请输入历史最低售价" maxlength="20"
                                @input="(e: string) => { forbidRule(e, 'historyPrice', 'emoji') }" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="卖点" prop="sellingPoints">
                            <el-input v-model="formData.sellingPoints" clearable :disabled="disabledName == ''"
                                class="ability_info" placeholder=" 请输入卖点" type="textarea" maxlength="189" autosize
                                show-word-limit @input="(e: string) => { forbidRule(e, 'sellingPoints', 'emoji') }" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="规格/材质" prop="specs">
                            <el-input v-model="formData.specs" clearable :disabled="disabledName == ''"
                                class="ability_info" placeholder="请输入规格/材质" type="textarea" maxlength="200" autosize
                                show-word-limit @input="(e: string) => { forbidRule(e, 'specs', 'emoji') }" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="商品图片" prop="productImage">
                            <ImageUploadDrags v-model="formData.productImage" :limit="5" :format="true"
                                :isType="disabledName !== ''" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row id="cooperation_information">
                    <el-col :span="24" class="fontWeight600 mb25">
                        合作信息
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <div class="taxClassName">
                            <el-form-item label="平台扣点" prop="tax" class="taxClassName_flex" style="flex: 1;">
                                <el-input v-model="formData.tax" clearable placeholder="请输入平台扣点"
                                    :disabled="disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''">
                                    <template #append>%</template>
                                </el-input>
                            </el-form-item>
                            <img src="@/assets/images/depot/icon_kongxinwenhao.png" alt="" class="taxClassName_img"
                                @click="isTaxRule = true">
                        </div>
                    </el-col>
                    <el-col :span="8" v-if="formData.productCategoryIs">
                        <el-form-item label="是否走仓" prop="warehouse">
                            <el-select v-model="formData.warehouse" clearable
                                :disabled="((disabledName == 'rejectStatus' || disabledName == 'alwaysEdit' || disabledName == ''))"
                                filterable placeholder="请选择是否走仓">
                                <el-option v-for="item in hm_warehouse" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" class="fontWeight600 mb25">
                        机制1：
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="合作方式" prop="cooperationMode">
                            <el-select v-model="formData.cooperationMode" clearable filterable
                                :disabled="disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''"
                                placeholder="请选择合作方式" @change="mechanismChange('1')">
                                <el-option v-for="item in hm_cooperation_mode" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="售价" :prop="formData.cooperationMode === '供货' ? '' : 'price'">
                            <el-input v-model="formData.price" clearable placeholder="请输入售价"
                                :disabled="formData.cooperationMode === '供货' || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="佣金" :prop="formData.cooperationMode === '供货' ? '' : 'commission'">
                            <el-input v-model="formData.commission" clearable
                                :disabled="formData.cooperationMode === '供货' || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''"
                                placeholder="请输入佣金">
                                <template #append>%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="直播机制" prop="liveStreamingMechanism">
                            <el-input v-model="formData.liveStreamingMechanism" clearable placeholder="请输入直播机制"
                                maxlength="12"
                                :disabled="disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''"
                                @input="(e: string) => { forbidRule(e, 'liveStreamingMechanism', 'blank') }" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="补充佣金" prop="brokerage">
                            <el-input v-model="formData.brokerage" clearable
                                :disabled="formData.cooperationMode === '供货' || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''"
                                placeholder="请输入补充佣金">
                                <template #append>%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="成本价" prop="costPrice">
                            <el-input v-model="formData.costPrice" clearable
                                :disabled="formData.cooperationMode === '分佣' || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''"
                                placeholder="请输入成本价" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <div v-if="mechanismArr.indexOf(2) !== -1" style="position: relative;">
                    <div class="delete_mechanism"
                        v-if="disabledName == 'all' || disabledName == 'rejectStatus' || disabledName == 'add'">
                        <el-image class="delete" :src="icon_shanchu" @click="handleDelete(2)"></el-image>
                    </div>
                    <el-row>
                        <el-col :span="24" class="fontWeight600 mb25">
                            机制2：
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="合作方式" prop="cooperationMode2">
                                <el-select v-model="formData.cooperationMode2" clearable
                                    :disabled="disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''"
                                    filterable placeholder="请选择合作方式" @change="mechanismChange('2')">
                                    <el-option v-for="item in hm_cooperation_mode" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="售价" :prop="formData.cooperationMode2 !== '供货' ? 'price2' : ''">
                                <el-input v-model="formData.price2" clearable
                                    :disabled="!formData.cooperationMode2 || formData.cooperationMode2 === '供货' || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''"
                                    placeholder="请输入售价" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="佣金" :prop="formData.cooperationMode2 !== '供货' ? 'commission2' : ''">
                                <el-input v-model="formData.commission2" clearable placeholder="请输入佣金"
                                    :disabled="!formData.cooperationMode2 || formData.cooperationMode2 === '供货' || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''">
                                    <template #append>%</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="直播机制" prop="liveStreamingMechanism2">
                                <el-input v-model="formData.liveStreamingMechanism2" clearable placeholder="请输入直播机制"
                                    maxlength="12"
                                    @input="(e: string) => { forbidRule(e, 'liveStreamingMechanism2', 'blank') }"
                                    :disabled="!formData.cooperationMode2 || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''" />
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="补充佣金" prop="brokerage2">
                                <el-input v-model="formData.brokerage2" clearable placeholder="请输入补充佣金"
                                    :disabled="!formData.cooperationMode2 || formData.cooperationMode2 === '供货' || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''">
                                    <template #append>%</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="成本价" prop="costPrice2">
                                <el-input v-model="formData.costPrice2" clearable placeholder="请输入成本价"
                                    :disabled="!formData.cooperationMode2 || formData.cooperationMode2 === '分佣' || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <div v-if="mechanismArr.indexOf(3) !== -1" style="position: relative;">
                    <div class="delete_mechanism"
                        v-if="disabledName == 'all' || disabledName == 'rejectStatus' || disabledName == 'add'">
                        <el-image class="delete" :src="icon_shanchu" @click="handleDelete(3)"></el-image>
                    </div>
                    <el-row>
                        <el-col :span="24" class="fontWeight600 mb25">
                            机制3：
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="合作方式" prop="cooperationMode3">
                                <el-select v-model="formData.cooperationMode3" clearable
                                    :disabled="disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''"
                                    filterable placeholder="请选择合作方式" @change="mechanismChange('3')">
                                    <el-option v-for="item in hm_cooperation_mode" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="售价" :prop="formData.cooperationMode3 !== '供货' ? 'price3' : ''">
                                <el-input v-model="formData.price3" clearable placeholder="请输入售价"
                                    :disabled="!formData.cooperationMode3 || formData.cooperationMode3 === '供货' || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="佣金" :prop="formData.cooperationMode3 !== '供货' ? 'commission3' : ''">
                                <el-input v-model="formData.commission3" clearable placeholder="请输入佣金"
                                    :disabled="!formData.cooperationMode3 || formData.cooperationMode3 === '供货' || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''">
                                    <template #append>%</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="直播机制" prop="liveStreamingMechanism3">
                                <el-input v-model="formData.liveStreamingMechanism3" clearable placeholder="请输入直播机制"
                                    maxlength="12"
                                    @input="(e: string) => { forbidRule(e, 'liveStreamingMechanism3', 'blank') }"
                                    :disabled="!formData.cooperationMode3 || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''" />
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="补充佣金" prop="brokerage3">
                                <el-input v-model="formData.brokerage3" clearable placeholder="请输入补充佣金"
                                    :disabled="!formData.cooperationMode3 || formData.cooperationMode3 === '供货' || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''">
                                    <template #append>%</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="成本价" prop="costPrice3">
                                <el-input v-model="formData.costPrice3" clearable placeholder="请输入成本价"
                                    :disabled="!formData.cooperationMode3 || formData.cooperationMode3 === '分佣' || disabledName == 'noMechanism' || disabledName == 'alwaysEdit' || disabledName == ''" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <div class="add_mechanism_div"
                    v-if="mechanismArr.length < 3 && (disabledName == 'all' || disabledName == 'rejectStatus' || disabledName == 'add')">
                    <el-button type="primary" :icon="Plus" @click="addMechanism(mechanismArr.length + 1)"
                        class="add_mechanism">补充机制</el-button>
                </div>
                <el-row>
                    <el-col :span="24" class="fontWeight600 mb25" id='live_supplementary_information'>
                        直播补充信息
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="发货时间" prop="deliveryTime">
                            <el-input v-model="formData.deliveryTime" clearable placeholder="请输入发货时间" maxlength="48"
                                @input="(e: string) => { forbidRule(e, 'deliveryTime', 'emoji') }"
                                :disabled="disabledName == ''" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="发货地" prop="placeDelivery">
                            <!-- <el-cascader v-model="formData.placeDelivery" clearable :disabled="disabledName == ''"
                                :options="options" :props="{
                                    label: 'value',
                                    value: 'value'
                                }" style="width: 100%;" filterable @change="placeDeliveryChange" /> -->
                            <el-input v-model="formData.placeDelivery" clearable placeholder="请输入发货地" maxlength="100"
                                @input="(e: string) => { forbidRule(e, 'placeDelivery', 'emoji') }"
                                :disabled="disabledName == 'rejectStatus' || disabledName == 'alwaysEdit' || disabledName == ''" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="物流/快递" prop="logistics">
                            <el-input v-model="formData.logistics" clearable maxlength="20"
                                :disabled="disabledName == ''" placeholder="请输入物流/快递"
                                @input="(e: string) => { forbidRule(e, 'logistics', 'blank') }" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="适用人群" prop="eligibility">
                            <el-input v-model="formData.eligibility" clearable :disabled="disabledName == ''"
                                placeholder="请输入适用人群" maxlength="20"
                                @input="(e: string) => { forbidRule(e, 'eligibility', 'emoji') }" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="厂家可用库存" prop="factoryStockNum">
                            <el-input v-model="formData.factoryStockNum" clearable :disabled="disabledName == ''"
                                placeholder="请输入厂家可用库存" maxlength="8" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="不发货地区" prop="noSendArea">
                            <el-input v-model="formData.noSendArea" clearable :disabled="disabledName == ''"
                                placeholder="请输入不发货地区" maxlength="72"
                                @input="(e: string) => { forbidRule(e, 'noSendArea', 'emoji') }" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="formData.auditStatus !== '-1' && formData.auditStatus !== '-2' && disabledName !== 'add'">
                    <el-col :span="24" class="flex_div">
                        <div class="label">
                            <img src="@/assets/images/pdf.png" alt="">【{{ formData.styleName }}】信息卡 (A4) PDF
                        </div>
                        <div class="value">
                            <span @click="preview(formData.id)">预览</span>
                            <span @click="handleExport(formData.id)">下载</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" class="fontWeight600 mb25" id="product_specifications">
                        商品资质
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备案凭证/行政许可批件" prop="voucherImage" label-width="220px">
                            <ImageUploadDrags v-model="formData.voucherImage" :limit="5" :format="true"
                                :fileType="['png', 'jpg', 'jpeg', 'pdf']"
                                :isType="disabledName == 'all' || disabledName == 'noMechanism' || disabledName == 'add'" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="其他资质" prop="otherImage" label-width="220px">
                            <ImageUploadDrags v-model="formData.otherImage" :limit="10" :format="true"
                                :fileType="['png', 'jpg', 'jpeg', 'pdf']"
                                :isType="disabledName == 'all' || disabledName == 'noMechanism' || disabledName == 'add'" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="formData.tradeMode == '进口'">
                    <el-col :span="24">
                        <el-form-item label="进口货物/原材料报关单" prop="customsDeclarationImage" label-width="220px">
                            <ImageUploadDrags v-model="formData.customsDeclarationImage" :limit="5" :format="true"
                                :fileType="['png', 'jpg', 'jpeg', 'pdf']"
                                :isType="disabledName == 'all' || disabledName == 'noMechanism' || disabledName == 'add'" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="formData.tradeMode == '进口'">
                    <el-col :span="24">
                        <el-form-item label="进口产品备案材料" prop="customsInformationImage" label-width="220px">
                            <ImageUploadDrags v-model="formData.customsInformationImage" :limit="5" :format="true"
                                :fileType="['png', 'jpg', 'jpeg', 'pdf']"
                                :isType="disabledName == 'all' || disabledName == 'noMechanism' || disabledName == 'add'" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="formData.tradeMode == '进口'">
                    <el-col :span="24">
                        <el-form-item label="进口产品原材料检验检疫证明" prop="customsInspectionImage" label-width="220px">
                            <ImageUploadDrags v-model="formData.customsInspectionImage" :limit="5" :format="true"
                                :fileType="['png', 'jpg', 'jpeg', 'pdf']"
                                :isType="disabledName == 'all' || disabledName == 'noMechanism' || disabledName == 'add'" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="formData.tradeMode == '进口'">
                    <el-col :span="24">
                        <el-form-item label="检测报告" prop="customsTestReportImgae" label-width="220px">
                            <ImageUploadDrags v-model="formData.customsTestReportImgae" :limit="5" :format="true"
                                :fileType="['png', 'jpg', 'jpeg', 'pdf']"
                                :isType="disabledName == 'all' || disabledName == 'noMechanism' || disabledName == 'add'" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <div>
                    <el-row>
                        <el-col :span="24" class="fontWeight600 mb25" id='merchant_information'>
                            商家信息
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <div class="flex">
                                <div class="label">
                                    <el-image :src="visaExemption" v-if="supplierData.bigBrandStatus == 1"></el-image>
                                    <div>供应商名称</div>
                                </div>
                                <el-input v-model="supplierData.supplierName" disabled class="value" />
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="商家类型">
                                <el-input v-model="supplierData.supplierType" disabled />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="供应商联系人">
                                <el-input v-model="supplierData.contactName" disabled />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="供应商联系电话">
                                <el-input v-model="supplierData.phone" disabled />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="厂家地址">
                                <el-input v-model="supplierData.addr" disabled />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="16">
                            <el-form-item label="厂家详细地址">
                                <el-input v-model="supplierData.address" disabled />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="营业执照" prop="businessImage">
                                <ImageUploadDrags v-model="supplierData.businessImage" :limit="5" :format="true"
                                    :isType="false" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="其他商家资质" prop="otherImage">
                                <ImageUploadDrags v-model="supplierData.otherImage" :limit="5" :format="true"
                                    :isType="false" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <div class="btn_tow_box"
                    style="position: absolute;bottom: 0;left: 0;background-color: #fff;width: 100%;padding: 20px;">
                    <el-row v-if="title !== '查看详情'">
                        <el-col :span="24">
                            <el-form-item>
                                <el-button type="primary" :loading="buttonLoading"
                                    @click="submitForm(formDataRef)">提交</el-button>
                                <el-button @click="resetForm(formDataRef)">取消</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>


            </el-form>
        </div>
        <Point v-if="isTaxRule" @close="isTaxRule = false" />
    </div>
</template>

<script setup lang="ts">
import { defineEmits, defineProps } from 'vue'
const { proxy } = getCurrentInstance() as any;
import { Plus } from '@element-plus/icons-vue'
import visaExemption from '@/assets/images/visaExemption.png'
const icon_lvseduihao = new URL("@/assets/images/icon_lvseduihao.png", import.meta.url).href;
const icon_wenhaohongse = new URL("@/assets/images/icon_wenhaohongse1.png", import.meta.url).href;
const { hm_trade_type } = toRefs<any>(proxy?.useDict('hm_trade_type'));
const { hm_cooperation_mode } = toRefs<any>(proxy?.useDict('hm_cooperation_mode'));
const { hm_discount } = toRefs<any>(proxy?.useDict('hm_discount'));
const { hm_express } = toRefs<any>(proxy?.useDict('hm_express'));
import jsonData from './compoments/address.json';
import icon_shanchu from '@/assets/images/icon_shanchu.png'
import { listHmContract } from '@/api/system/hmContract';
import { hmSupplierList } from '@/api/group/supplier/index'
import { loginSupplierByRoleList } from '@/api/group/supplier/index'
import { getCategoryLists } from '@/api/group/productOutbound/index'
import { addHmProducts, hmProductsEdit, editLive } from '@/api/system/supplierAddProducts/index'
import { getSupplierAddProducts } from '@/api/system/supplierAddProducts/index'
import { exportCertId } from '@/api/group/investmentPromotion/index'
import Point from './compoments/point.vue'
const router = useRouter();
const props = defineProps(['title', 'AddFormId', 'disabledName'])
const emit = defineEmits(['onSubmit'])
const options = jsonData
const screenIndex = ref(0)
const loading = ref(false)
const isTaxRule = ref(false)
const formDataRef = ref()
const cascaderAddr = ref()
const mechanismArr = ref([1])
const isDisabled = ref(false)
const screenList = ref([
    { name: '基本信息', id: '#essential_information' },
    { name: '合作信息', id: '#cooperation_information' },
    { name: '直播补充信息', id: '#live_supplementary_information' },
    { name: '商品资质', id: '#product_specifications' },
    { name: '商家信息', id: '#merchant_information' },
])
const formData = ref<any>({
    supplierName: "",
    supplierId: "",
    styleName: "",
    productCategoryName: '',
    productCategoryIs: false,
    categoryId: "",
    brandName: "",
    styleCode: "",
    tradeMode: "",
    discountPrice: "",
    specs: "",
    ingredient: "",
    warehouse: "",
    groupName: "",
    sellingPoints: "",
    productImage: "",
    tax: '',

    cooperationMode: "",
    price: "",
    costPrice: "",
    liveStreamingMechanism: "",
    commission: "",
    brokerage: "",

    cooperationMode2: "",
    price2: "",
    costPrice2: "",
    liveStreamingMechanism2: "",
    commission2: "",
    brokerage2: "",

    cooperationMode3: "",
    price3: "",
    costPrice3: "",
    liveStreamingMechanism3: "",
    commission3: "",
    brokerage3: "",

    deliveryTime: "",
    placeDelivery: "",
    placeDeliveryId: "",
    logistics: "",
    eligibility: "",
    factoryStockNum: "",
    noSendArea: "",
    voucherImage: "",
    otherImage: "",
    customsDeclarationImage: "",
    customsInformationImage: "",
    customsInspectionImage: "",
    customsTestReportImgae: "",
})
const buttonLoading = ref(false);
// 供应商数据
const supplierData = ref<any>({})
//走仓列表数据
const hm_warehouse = ref([
    {
        value: 1,
        label: '是',
    },
    {
        value: 0,
        label: '否',
    },

])

// 品牌效验
const validatorNumberBrand = (ruls: any, val: string) => {
    if (val) {
        return /^[\u0020-\u007e\u4e00-\u9fa5]+$/.test(val);
    } else {
        return true
    }
}
// 69码效验
const validatorStyleCode = (ruls: any, val: string) => {
    if (val) {
        return /^[0-9]{3,13}$/.test(val)
    } else {
        return true
    }
}
// 售价效验
const validatorNumber = (ruls: any, val: string) => {
    return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
}
// 平台扣点效验，佣金校验
const validatorcommission = (ruls: any, val: string) => /^(([1-9]?\d(\.\d{1,2})?)|100|100.00)$/.test(val);
// 成本效验
const validatorNumbercostPrice = (ruls: any, val: string) => {
    if (formData.value.cooperationMode == '分佣') {
        if (val) {
            return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
        } else {
            return true
        }
    } else if (formData.value.cooperationMode == '') {
        return true
    } else {
        return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
    }
}
const validatorNumbercostPrice2 = (ruls: any, val: string) => {
    if (formData.value.cooperationMode2 == '分佣') {
        if (val) {
            return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
        } else {
            return true
        }
    } else if (formData.value.cooperationMode2 == '') {
        return true
    } else {
        return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
    }
}
const validatorNumbercostPrice3 = (ruls: any, val: string) => {
    if (formData.value.cooperationMode3 == '分佣') {
        if (val) {
            return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
        } else {
            return true
        }
    } else if (formData.value.cooperationMode3 == '') {
        return true
    } else {
        return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
    }
}
// 补充佣金校验
const validatorbrokerage = (ruls: any, val: string) => {
    if (val) {
        return /^(([1-9]?\d(\.\d{1,2})?)|100|100.00)$/.test(val);
    } else {
        return true
    }
}
// 历史最低售价
const validatorPrice = (ruls: any, val: string) => {
    if (val) {
        return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val)
    } else {
        return true
    }
}
// 正整数验证
const positiveInteger = (ruls: any, val: string) => {
    if (val) {
        return /^[1-9]\d*$/.test(val);
    } else {
        return true
    }
}

const rules = ref({
    supplierId: [
        { required: true, message: '请选择供应商名称', trigger: 'change' },
    ],
    styleName: [
        { required: true, message: '请输入商品名称', trigger: 'change' },
    ],
    categoryId: [
        { required: true, message: '请选择商品类目', trigger: 'change' },
    ],
    brandName: [
        { validator: validatorNumberBrand, message: '请输入正确的品牌名称', trigger: 'change' }
    ],
    styleCode: [
        { validator: validatorStyleCode, message: '请输入正确内容', trigger: 'change' },
    ],
    tradeMode: [
        { required: true, message: '请选择贸易方式', trigger: 'change' },
    ],
    discountPrice: [
        { required: true, message: '请选择能否破价', trigger: 'change' },
    ],
    // groupName: [
    //     { required: true, message: '请输入对接群名', trigger: 'change' },
    // ],
    historyPrice: [
        { required: false, message: '请输入历史最低售价', trigger: 'change' },
        { validator: validatorPrice, message: '请输入正确的历史最低售价', }
    ],
    sellingPoints: [
        { required: true, message: '请输入卖点', trigger: 'change' },
    ],
    tax: [
        { required: true, message: '请输入平台扣点', trigger: 'change' },
        { validator: validatorcommission, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
    ],
    cooperationMode: [
        { required: true, message: '请选择合作方式', trigger: 'change' },
    ],
    price: [
        { required: true, message: '请输入售价', trigger: 'change' },
        { validator: validatorNumber, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
    ],
    costPrice: [
        { required: true, message: '请输入成本价', trigger: 'change' },
        { validator: validatorNumbercostPrice, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
    ],
    liveStreamingMechanism: [
        { required: true, message: '请输入直播机制', trigger: 'change' },
    ],
    commission: [
        { required: true, message: '请输入佣金', trigger: 'change' },
        { validator: validatorcommission, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
    ],
    brokerage: [
        { validator: validatorbrokerage, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
    ],

    cooperationMode2: [
        { required: true, message: '请选择合作方式', trigger: 'change' },
    ],
    price2: [
        { required: true, message: '请输入售价', trigger: 'change' },
        { validator: validatorNumber, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
    ],
    costPrice2: [
        { required: true, message: '请输入成本价', trigger: 'change' },
        { validator: validatorNumbercostPrice2, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
    ],
    liveStreamingMechanism2: [
        { required: true, message: '请输入直播机制', trigger: 'change' },
    ],
    commission2: [
        { required: true, message: '请输入佣金', trigger: 'change' },
        { validator: validatorcommission, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
    ],
    brokerage2: [
        { validator: validatorbrokerage, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
    ],

    cooperationMode3: [
        { required: true, message: '请选择合作方式', trigger: 'change' },
    ],
    price3: [
        { required: true, message: '请输入售价', trigger: 'change' },
        { validator: validatorNumber, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
    ],
    costPrice3: [
        { required: true, message: '请输入成本价', trigger: 'change' },
        { validator: validatorNumbercostPrice3, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
    ],
    liveStreamingMechanism3: [
        { required: true, message: '请输入直播机制', trigger: 'change' },
    ],
    commission3: [
        { required: true, message: '请输入佣金', trigger: 'change' },
        { validator: validatorcommission, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
    ],
    brokerage3: [
        { validator: validatorbrokerage, message: '请输入正确内容：整数或者保留两位小数', trigger: 'change' },
    ],
    factoryStockNum: [
        { required: true, message: '请输入厂家可用库存', trigger: 'change' },
        { validator: positiveInteger, message: '请输入正确的正整数', trigger: 'change' },
    ],
    specs: [
        { required: true, message: '请输入规格/材质', trigger: 'change' },
    ],
    warehouse: [
        { required: true, message: '请选择是否走仓', trigger: 'change' },
    ],
    deliveryTime: [
        { required: true, message: '请输入发货时间', trigger: 'change' },
    ],
})

// 供应商下拉列表
const SupplierList = ref<Array<any>>([]);
// 类目列表
const categoryList = ref<Array<any>>([]);

const supplierLoading = ref(true)
const supplierNameDate = ref({
    pageNum: 1,
    pageSize: 10,
    supplierName: ''
})
const supplierQueryLoading = ref(false)
const supplierNametotal = ref()


// 提交
const submitForm = async (formEl: any) => {
    if (!formEl) return
    await formEl.validate(async (valid: any, fields: any) => {
        if (valid) {
            loading.value = true
            buttonLoading.value = true;
            const params = { ...formData.value }
            if (params.cooperationMode == "供货") {
                delete params.price;
                delete params.commission
                delete params.brokerage
            }
            if (params.cooperationMode2 == "供货") {
                delete params.price2;
                delete params.commission2
                delete params.brokerage2
            }
            if (params.cooperationMode3 == "供货") {
                delete params.price3;
                delete params.commission3
                delete params.brokerage3
            }
            const hmMechanismsList = [
                {
                    cooperationMode: params.cooperationMode,
                    price: params.price,
                    costPrice: params.costPrice,
                    liveStreamingMechanism: params.liveStreamingMechanism,
                    commission: params.commission,
                    brokerage: params.brokerage,
                },
                {
                    cooperationMode: params.cooperationMode2,
                    price: params.price2,
                    costPrice: params.costPrice2,
                    liveStreamingMechanism: params.liveStreamingMechanism2,
                    commission: params.commission2,
                    brokerage: params.brokerage2,
                },
                {
                    cooperationMode: params.cooperationMode3,
                    price: params.price3,
                    costPrice: params.costPrice3,
                    liveStreamingMechanism: params.liveStreamingMechanism3,
                    commission: params.commission3,
                    brokerage: params.brokerage3,
                }
            ]
            params.categoryId = params.categoryId.join(',')
            // params.placeDelivery = params.placeDelivery && params.placeDelivery.join('-')
            params.placeDeliveryId = params.placeDelivery
            params.hmMechanismsList = hmMechanismsList
            try {
                if (props.title === '编辑商品') {
                    if (params.auditStatus == 3) {
                        // 修改机制调用
                        await editLive(params);
                    } else {
                        // 修改商品调用
                        await hmProductsEdit(params)
                    }
                    ElMessage({
                        message: '商品修改成功',
                        type: 'success',
                    })
                    loading.value = false
                    buttonLoading.value = false;
                } else {
                    // 添加商品调用
                    const res = await addHmProducts(params)
                    ElMessage({
                        message: '商品添加成功',
                        type: 'success',
                    })
                    loading.value = false
                    buttonLoading.value = false;
                }
                emit('onSubmit')
            } catch (error) {
                loading.value = false
                buttonLoading.value = false;
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}
// 重置
const resetForm = (formEl: any) => {
    if (!formEl) return
    formData.value = {
        supplierName: "",
        supplierId: "",
        styleName: "",
        productCategoryName: '',
        productCategoryIs: false,
        categoryId: "",
        brandName: "",
        styleCode: "",
        tradeMode: "",
        discountPrice: "",
        specs: "",
        ingredient: "",
        warehouse: "",
        groupName: "",
        sellingPoints: "",
        productImage: "",
        tax: '',

        cooperationMode: "",
        price: "",
        costPrice: "",
        liveStreamingMechanism: "",
        commission: "",
        brokerage: "",

        cooperationMode2: "",
        price2: "",
        costPrice2: "",
        liveStreamingMechanism2: "",
        commission2: "",
        brokerage2: "",

        cooperationMode3: "",
        price3: "",
        costPrice3: "",
        liveStreamingMechanism3: "",
        commission3: "",
        brokerage3: "",

        deliveryTime: "",
        placeDelivery: "",
        placeDeliveryId: "",
        logistics: "",
        eligibility: "",
        factoryStockNum: "",
        noSendArea: "",
        voucherImage: "",
        otherImage: "",
        customsDeclarationImage: "",
        customsInformationImage: "",
        customsInspectionImage: "",
        customsTestReportImgae: "",
    }
    emit('onSubmit')
}
// select选择处理
const optionChange = (e: string, key: string, arr: Array<any>) => {
    const data = arr.find(item => {
        return item.id === e
    })
    if (data) {
        formData.value[key] = data[key]
    }
}
// 输入事件、禁用规则
const forbidRule = (e: string, key: string, type: string) => {
    // 输入法表情默认不能输入
    if (type == 'emoji') {
        // emoji：输入时禁用输入法表情
        formData.value[key] = e.replace(/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\u00A9|\u00AE|\u3030/gi, '')
    } else if (type == 'blank') {
        // blank：输入时禁用空格
        formData.value[key] = e.replace(/\s|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\u00A9|\u00AE|\u3030/gi, '')
    }
}
// 机制选择合作方式清楚其余数据
const mechanismChange = (key: string) => {
    if (key === '1') {
        formData.value.price = ''
        formData.value.costPrice = ''
        formData.value.liveStreamingMechanism = ''
        formData.value.commission = ''
        formData.value.brokerage = ''
        formDataRef.value.clearValidate('price')
        formDataRef.value.clearValidate('costPrice')
        formDataRef.value.clearValidate('liveStreamingMechanism')
        formDataRef.value.clearValidate('commission')
        formDataRef.value.clearValidate('brokerage')
    }
    if (key === '2') {
        formData.value.price2 = ''
        formData.value.costPrice2 = ''
        formData.value.liveStreamingMechanism2 = ''
        formData.value.commission2 = ''
        formData.value.brokerage2 = ''
        formDataRef.value.clearValidate('price2')
        formDataRef.value.clearValidate('costPrice2')
        formDataRef.value.clearValidate('liveStreamingMechanism2')
        formDataRef.value.clearValidate('commission2')
        formDataRef.value.clearValidate('brokerage2')

    }
    if (key === '3') {
        formData.value.price3 = ''
        formData.value.costPrice3 = ''
        formData.value.liveStreamingMechanism3 = ''
        formData.value.commission3 = ''
        formData.value.brokerage3 = ''
        formDataRef.value.clearValidate('price3')
        formDataRef.value.clearValidate('costPrice3')
        formDataRef.value.clearValidate('liveStreamingMechanism3')
        formDataRef.value.clearValidate('commission3')
        formDataRef.value.clearValidate('brokerage3')
    }

}
// 处理商品类目名称
const categoryIdChange = (value: any) => {
    if (value && value.length) {
        formData.value.productCategoryName = cascaderAddr.value.getCheckedNodes()[0].pathLabels.join(',')
        let name = cascaderAddr.value.getCheckedNodes()[0].pathLabels.join(',')
        if (name.indexOf('饰品') < 0) {
            formData.value.productCategoryIs = false
            formData.value.warehouse = ''
        } else {
            formData.value.productCategoryIs = true
        }
    } else {
        formData.value.productCategoryName = ''
        formData.value.productCategoryIs = false
        formData.value.warehouse = ''
    }
}
/** 补充机制 */
const addMechanism = (index: number) => {
    mechanismArr.value.push(index)
}
onMounted(() => {
    GetCategoryLists()
    if (props.title === '查看详情') {
        isDisabled.value = true
    } else {

    }
    if (props.title === '查看详情' || props.title === '编辑商品') {
        getLook()
    }
})
// 获取供应商列表
const getListHmContract = async () => {
    supplierLoading.value = true
    const res = await loginSupplierByRoleList(supplierNameDate.value)
    const reshandle = res.rows.map((item: any) => (
        {
            label: item.supplierName,
            value: item.id
        }
    ))
    SupplierList.value.push(...reshandle)
    supplierNametotal.value = res.total
    supplierLoading.value = false
}
/** select懒加载 */
const selectLoad = async () => {
    if (SupplierList.value.length < supplierNametotal.value) {
        supplierNameDate.value.pageNum++;
        getListHmContract()
    }
}
/** 远程搜索 */
const searchQuery = async (query: string) => {
    supplierQueryLoading.value = true
    SupplierList.value = []
    supplierNameDate.value.pageNum = 1;
    supplierNameDate.value.pageSize = 10
    supplierNameDate.value.supplierName = query
    await getListHmContract()
    supplierQueryLoading.value = false
}
/** 清空供应商 */
const handleClear = () => {
    supplierNameDate.value.supplierName = ''
    SupplierList.value = []
    supplierNameDate.value.pageNum = 1;
    supplierNameDate.value.pageSize = 10
    getListHmContract()
}
// 获取所有类目
const GetCategoryLists = async () => {

    const { data = [] } = await getCategoryLists()
    categoryList.value = data

}
watchEffect(() => {
    // 监听平台扣点，售价，佣金，补充佣金，动态计算成本
    if (formData.value.cooperationMode === '分佣') {
        let costPrice = Number(formData.value.price || 0) * (1 - ((Number(formData.value.commission || 0) / 100) + (Number(formData.value.brokerage || 0) / 100) + (Number(formData.value.tax || 0) / 100)))
        formData.value.costPrice = isNaN(costPrice) ? 0 : costPrice.toFixed(2)
    }
    if (formData.value.cooperationMode2 === '分佣') {
        let costPrice2 = Number(formData.value.price2 || 0) * (1 - ((Number(formData.value.commission2 || 0) / 100) + (Number(formData.value.brokerage2 || 0) / 100) + (Number(formData.value.tax || 0) / 100)))
        formData.value.costPrice2 = isNaN(costPrice2) ? 0 : costPrice2.toFixed(2)
    }
    if (formData.value.cooperationMode3 === '分佣') {
        let costPrice3 = Number(formData.value.price3 || 0) * (1 - ((Number(formData.value.commission3 || 0) / 100) + (Number(formData.value.brokerage3 || 0) / 100) + (Number(formData.value.tax || 0) / 100)))
        formData.value.costPrice3 = isNaN(costPrice3) ? 0 : costPrice3.toFixed(2)
    }
})
// 查看详情与修改商品时调用详情接口进行数据反显
const getLook = async () => {
    loading.value = true
    const res = await getSupplierAddProducts(props.AddFormId)
    let params = JSON.parse(JSON.stringify(res.data))
    params.categoryId = params.categoryId?.split(',')
    params.placeDeliveryId = params.placeDeliveryId?.split(',')
    params.hmMechanismsList.forEach((item: any, index: number) => {
        if (index === 0) {
            params.cooperationMode = item.cooperationMode
            params.price = item.price
            params.costPrice = item.costPrice
            params.liveStreamingMechanism = item.liveStreamingMechanism
            params.commission = item.commission
            params.brokerage = item.brokerage
        }
        if (index === 1 && item.cooperationMode) {
            params.cooperationMode2 = item.cooperationMode
            params.price2 = item.price
            params.costPrice2 = item.costPrice
            params.liveStreamingMechanism2 = item.liveStreamingMechanism
            params.commission2 = item.commission
            params.brokerage2 = item.brokerage
            mechanismArr.value.push(2)
        }
        if (index === 2 && item.cooperationMode) {
            params.cooperationMode3 = item.cooperationMode
            params.price3 = item.price
            params.costPrice3 = item.costPrice
            params.liveStreamingMechanism3 = item.liveStreamingMechanism
            params.commission3 = item.commission
            params.brokerage3 = item.brokerage
            mechanismArr.value.push(3)
        }
    })
    // params.placeDelivery = params.placeDelivery ? (params.placeDelivery as string).split('-') : []
    params.productCategoryIs = params?.productCategoryName?.indexOf('饰品') < 0 ? false : true
    formData.value = params
    loading.value = false
    supplierData.value = params.supplierVo

    SupplierList.value = [
        {
            label: formData.value.supplierName,
            value: formData.value.supplierId
        }
    ]
}
/** 删除机制 */
const handleDelete = (index: number) => {
    // 当机制二删除并且机制三也存在得情况 删除机制三 保留机制二
    if (index == 2 && mechanismArr.value.length == 3) {
        mechanismArr.value.splice(2, 1)
        formData.value.cooperationMode2 = formData.value.cooperationMode3
        formData.value.price2 = formData.value.price3
        formData.value.costPrice2 = formData.value.costPrice3
        formData.value.liveStreamingMechanism2 = formData.value.liveStreamingMechanism3
        formData.value.commission2 = formData.value.commission3
        formData.value.brokerage2 = formData.value.brokerage3

        formData.value.cooperationMode3 = ""
        formData.value.price3 = ""
        formData.value.costPrice3 = ""
        formData.value.liveStreamingMechanism3 = ""
        formData.value.commission3 = ""
        formData.value.brokerage3 = ""
    } else {
        let indexs = mechanismArr.value.indexOf(index)
        mechanismArr.value.splice(indexs, 1)
        if (index == 2) {
            formData.value.cooperationMode2 = ""
            formData.value.price2 = ""
            formData.value.costPrice2 = ""
            formData.value.liveStreamingMechanism2 = ""
            formData.value.commission2 = ""
            formData.value.brokerage2 = ""
        } else if (index == 3) {
            formData.value.cooperationMode3 = ""
            formData.value.price3 = ""
            formData.value.costPrice3 = ""
            formData.value.liveStreamingMechanism3 = ""
            formData.value.commission3 = ""
            formData.value.brokerage3 = ""
        }
    }
}
// 锚点
const navClick = (id: string, index: number) => {
    const info: any = document.querySelector(id)
    info.scrollIntoView({ behavior: 'smooth' })
    screenIndex.value = index
}
/** 预览 */
const preview = async (id: string) => {
    const resp: any = await exportCertId(id)
    const blob = window.URL.createObjectURL(new Blob([resp], { type: 'application/pdf' }));
    window.open(blob)
}
/** 下载 */
const handleExport = async (id: string) => {
    const resp: any = await exportCertId(id)

    // 创建一个Blob对象，并传入响应数据  
    const blob = new Blob([resp], { type: 'application/pdf' });

    // 创建一个指向该Blob对象的URL  
    const url = window.URL.createObjectURL(blob);

    // 创建一个下载链接，并模拟点击它  
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', `${formData.value.styleName}信息卡`); // 设置下载的文件名  
    document.body.appendChild(link);
    link.click();

    // 从DOM中移除链接，并释放URL对象  
    link.remove();
    window.URL.revokeObjectURL(url);
}
// 发货地点击
const placeDeliveryChange = (val: any) => {
    console.log(val)
}
// 供应商事件
const onchange = async (e: string) => {
    optionChange(e, 'supplierName', SupplierList.value)
    if (e) {
        const res = await hmSupplierList({ id: e })
        supplierData.value = res.rows[0]
    } else {
        supplierData.value = {}
    }
}
// 去补充
const addSupplement = () => {
    if (props.disabledName !== '') {
        router.push({
            path: '/suppliers/contractDetail',
            query: {
                routerType: 'add'
            }
        })
    }
}
</script>

<style lang="scss" scoped>
.circular {
    display: inline;
    height: 30px;
    width: 30px;
    animation: loading-rotate 2s linear infinite;
}

.path {
    animation: loading-dash 1.5s ease-in-out infinite;
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    stroke-width: 2;
    stroke: var(--el-color-primary);
    stroke-linecap: round;
}

.supplierSelect_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.el-select-loading__tips {
    color: #606266;
    font-size: 14px;
}

.flex {
    display: flex;
    align-items: center;
    font-size: 14px;
    height: 32px;
    line-height: 32px;

    .label {
        width: 120px;
        text-align: right;
        font-weight: 700;
        color: #606266;
        padding: 0 12px 0 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        line-height: 1;

        .el-image {
            width: 16px;
            height: 16px;
        }
    }

    .value {
        flex: 1;

    }
}

.addForm {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;

    .screen {
        display: flex;
        align-items: center;
        cursor: pointer;

        .screen_div {
            width: 106px;
            height: 44px;
            background: #EBF7FF;
            text-align: center;
            line-height: 44px;
            font-weight: 500;
            font-size: 14px;
            color: #0094FF;
        }

        .screen_div_hover {
            width: 106px;
            height: 44px;
            background: #0094FF;
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;
            text-align: center;
            line-height: 44px;
        }
    }

    .addForm_for {
        flex: 1;
        min-height: 0;
        overflow-y: auto;

        .taxClassName {
            display: flex;

            .taxClassName_flex {
                flex: 1;
            }

            .taxClassName_img {
                margin-left: 15px;
                margin-top: 7px;
                width: 18px;
                height: 18px;
                cursor: pointer;
            }
        }
    }

}

.examine_item {
    width: 85px;
    height: 22px;
    background: #E7FDEE;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 12px;
    color: #19D11B;
    line-height: 22px;
    margin-right: 10px;

    img {
        width: 14px;
        height: 14px;
        margin-left: 5px;
    }
}

.fontWeight600 {
    font-weight: 600;
    font-size: 16px;
    color: var(--bTextColor);
}

.mb25 {
    margin-bottom: 25px;
}

.add_mechanism_div {
    width: 100%;
    display: flex;
    justify-content: center;

    .add_mechanism {
        width: 275px;
        height: 38px;
        font-size: 16px;

    }
}

.delete_mechanism {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 10px;
    top: 0;
    cursor: pointer;
    z-index: 50;
}

.flex_div {
    display: flex;
    margin-left: 50px;

    .label {
        min-width: 120px;
        font-size: 14px;
        background-color: rgba(240, 246, 255);
        padding: 4px 7px;

        img {
            width: 14px;
            height: 14px;
        }

        margin-right: 10px;
    }

    .value {
        color: #0094FF;
        font-weight: 400;
        font-size: 14px;
        line-height: 27px;
        cursor: pointer;

        span {
            margin-right: 30px;
        }
    }
}

.supplement {
    line-height: 32px;
    color: #409EFF;
    font-size: 14px;
    margin-left: 5px;
    cursor: pointer;
}
</style>